<html>
<%@ include file="/paginas/comun.jsp" %>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript">
    var map = null;
    var myLatlng = null;
    $(document).ready(function () {
        $('#tabs').bind('tabsshow', function(event, ui) {
            if (ui.panel.id == "tabs-6") {
                google.maps.event.trigger(map,'resize');
                map.setCenter(myLatlng);
            }
        });
    });
  function initialize() {
    myLatlng = new google.maps.LatLng(-11.240258, -76.815244);
    var myOptions = {
      zoom: 15,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.SATELLITE
    };
 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
    var contentString = 'Comunidad de Canchapilca';
        
    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });
 
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'Canchapilca'
    });
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });
  }
 
</script> 
<body onload="initialize()">
<table id="tblPaginaCentral">
<tr><td>Ficha de la Comunidad</td></tr>
<tr><td>
        <table id="tblFormulario">
            <tr><td>Nombre</td><td>Canchapilca</td></tr>
        </table>
        <div id="tabs" style="width:100%; height:400px; margin-top: 5px">
            <ul>
                <li><a href="#tabs-1">Datos Generales</a></li>
                <li><a href="#tabs-2">Cultivos</a></li>
                <li><a href="#tabs-3">Enfermedades</a></li>
                <li><a href="#tabs-4">Historia</a></li>
                <li><a href="#tabs-5">Fiesta Patronal</a></li>
                <li><a href="#tabs-6">Ubicaci&oacute;n Geogr&aacute;fica</a></li>
            </ul>
            <div id="tabs-1" style="border-collapse: collapse; padding: 0px;">
                <table style="width:100%">
                    <tr><td>Descripci&oacute;n</td><td>Comunidad de Canchapilca</td></tr>
                    <tr><td>Departamento</td><td>Lima</td></tr>
                    <tr><td>Provincia</td><td>Huaral</td></tr>
                    <tr><td>Distrito</td><td>Lampian</td></tr>
                    <tr><td>Referencia</td><td>Entre el cerro de lampiam y carac</td></tr>
                    <tr><td>Altura</td><td>1800</td></tr>
                    <tr><td>Extensi&oacute;n Territorial</td><td>1 000 000 ha</td></tr>
                    <tr><td>Imagen</td><td>&nbsp;</td></tr>
                    <tr>
                        <td colspan="2" align="center">
                        <img src="../../../imagenes/canchapilca.jpg" style="width: 550px; height:200px">
                        </td></tr>
                </table>
            </div>
            <div id="tabs-2" style="border-collapse: collapse; padding: 0px;">
		        <table id="tblListado">
					<thead>
						<tr><th>Cultivo</th>
		                    <th>Especie</th>
		                    <th>Tipo</th>
							<th>Rendimiento</th>
							<th>Imagen</th></tr>
					</thead>
					<tbody>
						<tr><td>Ajo</td>
							<td>Napuri</td>
							<td>Pan de llevar</td>
							<td>7</td>
		                    <td><img src="../../../imagenes/ajo.jpg" class="imgListado"></td></tr>
					</tbody>
				</table>
            </div>
            <div id="tabs-3" style="border-collapse: collapse; padding: 0px;">
		        <table id="tblListado">
					<thead>
						<tr><th>Enfermedad</th>
		                    <th>Tipo</th>
							<th>Tiempo Vida</th>
							<th>Imagen</th></tr>
					</thead>
					<tbody>
						<tr><td>Trips</td>
							<td>Plaga</td>
							<td>15</td>
		                    <td><img src="../../../imagenes/ajo.jpg" class="imgListado"></td></tr>
					</tbody>
				</table>
            </div>
            <div id="tabs-4" style="border-collapse: collapse; padding: 0px;">
            Datos de la historia de la comunidad
            </div>
            <div id="tabs-5" style="border-collapse: collapse; padding: 0px;">
            Datos de la fiesta patronal
            </div>
            <div id="tabs-6" style="border-collapse: collapse; padding: 0px;">
                <div id="map_canvas" style="height: 368px; margin-top: 36px"></div>
            </div>
            
        </div>
</td></tr>
</table>
</body>
</html>